<template>
  <div>
    <canvas id="myCanvas" ref="myCanvas" width="150" height="50">
      您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 纯手写canvas
      const canvas = this.$refs.myCanvas;
      var ctx = canvas.getContext("2d");
      this.daring(ctx, 0, 0, 150, 0, "#3557e4");
      this.daring(ctx, 0, 0, 0, 50, "#4b82cf");
      this.daring(ctx, 0, 50, 120, 50, "#3171cc");
      this.daring(ctx, 150, 0, 150, 30, "#0d69eb");
      this.daring(ctx, 150, 30, 120, 50, "#1d61c1");
    },
    daring(ctx, x1, y1, x2, y2, color) {
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.strokeStyle = color;
      ctx.stroke();
      ctx.closePath();
    },
  },
};
</script>

<style></style>
